<!-- 社区页面中的图片展示 -->
<template>
  <div class="photo-show-container">
    
    <!-- 大盒子 -->
    <div class="photoArea">
      <!-- 每一行的图片布局 -->
      <div class="row" v-for="(rows,index) in rowLists" :key="index">
        <!-- 每一张图片区域 -->
        <div class="photoInfo" v-for="img in rows" :key="img.id">
          <!-- 图片 -->
          <div class="img-box">
            <router-link :to="{name: 'photoInfo'}">
            <img :src="img.src" style="height:400px;">
            </router-link>
          </div>
          <!-- 作者图标，上传日期，标签，点赞，收藏 -->
          <div class="author">
            <div class="left">
              <img src="@/images/icon.jpg" alt style="width:30px;">
              &nbsp;
              <span>author</span>
            </div>
            <div class="right">
              <img src="@/assets/icon1/dianzan.svg" alt="点赞" title="点赞" style="width:30px;" 
              v-if="dianzan" @click.prevent="dianzan=false">
              <img src="@/assets/icon1/dianzansucc.svg" alt="取消点赞" title="取消点赞" style="width:30px;" 
              v-else @click.prevent="dianzan=true">
              &nbsp;&nbsp;
              <img src="@/assets/icon1/shoucan.svg" alt="收藏" title="收藏" style="width:30px;" 
              v-if="shoucan" @click.prevent="shoucan=false">
              <img src="@/assets/icon1/shoucansucc.svg" alt="取消收藏" title="取消收藏" style="width:30px;" 
              v-else @click.prevent="shoucan=true">
            </div>
          </div>
        </div>
      </div>
      <div class="more" style="text-align:center;margin-bottom:50px;">
        <el-button type="info">加载更多</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgLists: [
        {
          src: require("../../images/1.png"),
          id: 1
        },
        {
          src: require("../../images/2.png"),
          id: 2
        },
        {
          src: require("../../images/3.png"),
          id: 3
        },
        {
          src: require("../../images/2.png"),
          id: 4
        },
        {
          src: require("../../images/1.png"),
          id: 5
        },
        {
          src: require("../../images/3.png"),
          id: 6
        },
      ],
      showzan: false,
      dianzan: true,
      shoucan: true,
      rowLists:[]

    };
  },
  mounted:function(){
     this.changeRow()
    console.log(this.rowLists)
  },
  
  methods: {
   changeRow(){
     var rowNum=parseInt(Math.ceil(this.imgLists.length/3))
     var n=0
     for(var i =0; i<rowNum; i++){    
      var rowList=[]
        n =i*3
       for(var j =n; j<(n+3); j++){
         rowList.push(this.imgLists[j])       
       }
       this.rowLists.push(rowList)
     }
     return
   }
  
  }
};
</script>
<style lang='scss' scoped>
.photo-show-container {
  margin: 0px;
  


  .row {
    display: flex;
    justify-content: space-between;
    margin: 50px 0;
    
    .img-box {
      position: relative;
      overflow: hidden;
      img {
        cursor: pointer;
        transition: all 0.6s;
      }
      img:hover {
        transform: scale(1.4);
      }
    }
    .author {
      
      display: flex;
      justify-content: space-between;
      padding: 10px 10px;
      height: 50px;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      .left{
        span{
          position: relative;
          bottom: 30%;
        }
      }
      .right{
        img{
          cursor: pointer;
        transition: all 0.6s;
        }
        img:hover {
        transform: scale(1.4);
      }
      }
    }
  }
}
</style>